<template>
    <div class="registration-form">
      <h2>用户注册</h2>
      <form @submit.prevent="submitForm">
        <div>
          <label for="username">用户名:</label>
          <input type="text" v-model="username" id="username" />
          <span v-if="errors.username">{{ errors.username }}</span>
        </div>
  
        <div>
          <label for="phone">手机号:</label>
          <input type="text" v-model="phone" id="phone" />
          <span v-if="errors.phone">{{ errors.phone }}</span>
        </div>
  
        <div>
          <label for="idNumber">身份证号:</label>
          <input type="text" v-model="idNumber" id="idNumber" />
          <span v-if="errors.idNumber">{{ errors.idNumber }}</span>
        </div>
  
        <div>
          <label for="password">密码:</label>
          <input type="password" v-model="password" id="password" />
          <span v-if="errors.password">{{ errors.password }}</span>
        </div>
  
        <div>
          <label for="email">邮箱:</label>
          <input type="email" v-model="email" id="email" />
          <span v-if="errors.email">{{ errors.email }}</span>
        </div>
  
        <button type="submit">注册</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        phone: '',
        idNumber: '',
        password: '',
        email: '',
        errors: {}
      };
    },
    methods: {
      validateUsername() {
        const regex = /^[a-zA-Z0-9_]{3,10}$/;
        if (!regex.test(this.username)) {
          return '用户名必须是3-10个字符，仅包含英文字母、数字和下划线';
        }
        // 假设 usernames 是一个已存在用户名的数组
        const usernames = ['user1', 'user2'];
        if (usernames.includes(this.username)) {
          return '用户名已存在';
        }
        return '';
      },
      validatePhone() {
        const regex = /^1[3-9]\d{9}$/;
        if (!regex.test(this.phone)) {
          return '手机号格式不正确';
        }
        return '';
      },
      validateIdNumber() {
        const regex = /^\d{17}[\dXx]$/;
        if (!regex.test(this.idNumber)) {
          return '身份证号格式不正确';
        }
        return '';
      },
      validatePassword() {
        const lengthRegex = /^.{6,32}$/;
        const complexityRegex = /^(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[-_])|(?=.*\d)(?=.*[-_])/;
        if (!lengthRegex.test(this.password)) {
          return '密码长度必须为6-32个字符';
        }
        if (!complexityRegex.test(this.password)) {
          return '密码必须至少包含字母、数字或特殊字符（-_）中的两种';
        }
        return '';
      },
      validateEmail() {
        const regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        if (!regex.test(this.email)) {
          return '邮箱格式不正确';
        }
        return '';
      },
      validateForm() {
        this.errors = {};
        const usernameError = this.validateUsername();
        if (usernameError) {
          this.errors.username = usernameError;
        }
  
        const phoneError = this.validatePhone();
        if (phoneError) {
          this.errors.phone = phoneError;
        }
  
        const idNumberError = this.validateIdNumber();
        if (idNumberError) {
          this.errors.idNumber = idNumberError;
        }
  
        const passwordError = this.validatePassword();
        if (passwordError) {
          this.errors.password = passwordError;
        }
  
        const emailError = this.validateEmail();
        if (emailError) {
          this.errors.email = emailError;
        }
  
        return Object.keys(this.errors).length === 0;
      },
      submitForm() {
        if (this.validateForm()) {
          alert('注册成功');
          // 提交表单数据
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .registration-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .registration-form div {
    margin-bottom: 15px;
  }
  .registration-form label {
    display: block;
    margin-bottom: 5px;
  }
  .registration-form input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
  .registration-form span {
    color: red;
    font-size: 12px;
  }
  .registration-form button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .registration-form button:hover {
    background-color: #0056b3;
  }
  </style>
  